<template>
<view class="page-tourline-detail">
  <view class="page-tourline-detail-header">
    <basic-nav-bar 
      left-icon="arrowleft" 
      title="精品线路" 
      statusBar 
      :fixed="true">
    </basic-nav-bar>
  </view>
  
  <view v-if="tourDetail.name" class="tourline-detail">
    <!-- 轮播 -->
    <productSwiper :pictures="tourDetail.images" />

    <!-- 基本信息 -->
    <baseInfo :product="tourDetail" />

    <!-- 景区介绍 -->
    <intro v-if="tourDetail.name" :navHeight="navHeight" :product="tourDetail" @change="scrollToOffset"/>

    <basic-safe-area></basic-safe-area>
  </view>
  

  <!-- 立即预订 -->
  <view class="booking-pannel">
    <view class="booking-btn">
      <view class="price-wrapper">
        <basic-price :price="tourDetail.price" size="36rpx" unitSize="26rpx" weight="600" color="#FF5944" unitColor="#FF5944"/>
        <text class="price-suffix">起</text>
      </view>
      <basic-button type="primary" borderRadius="0" width="240rpx" height='100%' @click="handleBooking">立即预订</basic-button>
    </view>
    <basic-safe-area />
  </view>
</view>
</template>
<script>
import productSwiper from '../../../components/product-swiper'
import baseInfo from './components/base-info'
import intro from './components/intro'
import sdk from 'sdk'
import storage from 'utils/helper/storage'
import {getTourDetail} from 'api'
export default {
  name: 'page-tourline-detail',
  components: { baseInfo, intro, productSwiper },

  data() {
    return {
      tourCode: '',
      tourDetail: {
        images: []
      },

      scrollTop: 0, // 滚动到目标节点
      navHeight: 0 // 顶部导航高度
    }
  },

  onLoad(options) {
    this.getDetail(options)
  },

  mounted() {
		this.initNavHeight()
	},

  methods: {
    initNavHeight() {
			sdk.getOffset('.page-tourline-detail-header').then(res => {
        this.navHeight = res.height
			})
    },
    
    getDetail(options) {
      let {code} = options

      if (!code) {
        uni.showToast({
          title: '无效的线路标识',
          icon: 'none',
          duration: '2000'
        })

        setTimeout(() => {sdk.navigateBack()}, 2000)

        return
      }

      this.tourCode = code

      getTourDetail({code}).then(res => {
        this.tourDetail = res.result
      }).catch(err => {
        uni.showToast({
          title: '获取线路信息失败，请稍后再试~~~',
          icon: 'none',
          duration: '2000'
        })

        setTimeout(() => {sdk.navigateBack()}, 2000)
      })
    },

    scrollToOffset(targetOffset) {
      sdk.pageScrollTo({
        scrollTop:  targetOffset - this.navHeight
      })
    },

    handleBooking() {
      // 缓存当前商品信息
      storage.set('tourline_choose_sku', {
        tourCode: this.tourCode,
        tourDetail: this.tourDetail
      })
      // 垃圾app存完localstorage不能立马打开新窗口
      setTimeout(() => {
        sdk.navigateTo({
          url: '/packageDetail/pages/tourline/choose-sku/index'
        })
      }, 0)
    }
  }
}
</script>
<style lang="less">
.page-tourline-detail {
  @booking_height: 100rpx;
  min-height: 100vh;
  background: #ffffff;

  .tourline-detail {
    padding-bottom: @booking_height;
  }

  .booking-pannel {
    position: fixed;
    z-index: 2;
    bottom: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 0 14rpx 0 rgba(204, 204, 204, 0.5);

    .booking-btn {
      .flex;
      height: @booking_height;
    }
    .price-wrapper {
      .flex-1;
      .flex;
      .flex-middle;

      margin: 0 36rpx;
    }

    .price-suffix {
      margin-left: 10rpx;

      font-size: 24rpx;
    }
  }
}
</style>